<template>
    <div class="chat-window" ref="chatWindow">
      <MessageItem
        v-for="message in messages"
        :key="message.id"
        :message="message"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import MessageItem from './MessageItem.vue'
  
  const props = defineProps({
    messages: {
      type: Array,
      required: true
    }
  })
  
  const chatWindow = ref(null)
  
  // 监听消息变化，自动滚动到底部
  watch(() => props.messages.length, () => {
    setTimeout(() => {
      if (chatWindow.value) {
        chatWindow.value.scrollTop = chatWindow.value.scrollHeight
      }
    }, 100)
  })
  </script>
  
  <style scoped>
  .chat-window {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #f5f5f5;
  }
  </style>